<route>
    {
        meta: {
            layout: 'index',
            title:'常规仪器串信息管理'
        }
    }  
</route>
<template>
    <div>
        <view>
            <div class="app-container">
                <a-row v-if="!open">
                    <a-input-search v-model:value="searchKey" placeholder="请输常规仪器串信息" enter-button="搜索"
                        style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
                    <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
                    <a-space>
                        <a-select ref="select" v-model:value="combinationType" placeholder="系列选择"
                            style="width: 150px; margin-bottom: 10px; margin-left: 50px;" @focus="focus">
                            <a-select-option value="CPLog">CPLog</a-select-option>
                            <a-select-option value="5700">5700</a-select-option>
                        </a-select>
                    </a-space>
                    <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;"
                        @click="handleAdd()">
                        <template #icon><plus-outlined /></template>新增
                    </a-button>
                </a-row>
                <a-row v-if="open">
                    <a-button type="primary" style="margin-bottom: 10px; width: 100px;" @click="getReturn">返回</a-button>
                </a-row>
                <div v-if="!open">
                    <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="['combinationName'].includes(column.dataIndex)">
                                <div>
                                    <a-input v-if="editableData[record.id]"
                                        v-model:value="editableData[record.id][column.dataIndex]"
                                        style="margin: -5px 0; width: 100%;" />
                                    <template v-else>
                                        {{ text }}
                                    </template>
                                </div>
                            </template>
                            <template v-if="column.title === '仪器名称列表'">
                                {{ record.instrumentNameList.toString().replace(/,/g, " + ") }}
                            </template>
                            <template v-else-if="column.dataIndex === 'action'">
                                <div style="margin-right: 8px;">
                                    <span v-if="editableData[record.id]">
                                        <a-button type="link" @click="save(record.id)">保存 </a-button>
                                        <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                            <a-button type="link">取消</a-button>
                                        </a-popconfirm></AntdZh>
                                    </span>
                                    <span v-else>
                                        <a-button type="link" @click="edit(record)">编辑</a-button>
                                        <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                            <a-button type="link" danger>删除</a-button>
                                        </a-popconfirm></AntdZh>
                                    </span>
                                </div>
                            </template>
                        </template>
                    </a-table>
                    <AntdZh>
                        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                            @change="getList" />
                    </AntdZh>
                </div>
            </div>
        </view>
        <combination-edit v-if="open" :combinationData="combinationData" :state="state"></combination-edit>
    </div>
</template>
<script setup>
import CombinationEdit from "./CombinationEdit"
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne, getOne } from "@/api/tool/combination.js";
import { PlusOutlined } from '@ant-design/icons-vue';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const data = reactive({
    form: {}
});
const combinationType = ref('')
const combinationData = ref()
const state = ref('')
const open = ref(false)
const { form } = toRefs(data);
const total = ref(1)
const dataSource = ref([]);
// 定义表格列配置
const columns = [
    {
        title: '组合名称',
        dataIndex: 'combinationName',
        key: 'combinationName',
        width: '20%'
    },
    {
        title: '仪器串组合系列',
        dataIndex: 'combinationSeries',
        key: 'combinationSeries',
        width: '15%'
    },
    {
        title: '作业类别',
        dataIndex: 'combinationType',
        key: 'combinationType',
        width: '15%'
    },
    {
        title: '仪器名称列表',
        dataIndex: 'instrumentNameList',
        key: 'instrumentNameList',
        width: '50%'
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', combinationSeries: undefined });
const editableData = reactive({});

watch(() => combinationType.value, (newVal) => {
    console.log('combinationType.value', newVal)
    getList()
})
// 保存
const save = key => {
    updateOne(editableData[key]).then(res => {
        console.log('save', res);
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
};
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};
// 编辑
function edit(e) {
    state.value = '修改'
    combinationData.value = e
    open.value = true
}
// 新增
function handleAdd() {
    state.value = '新增'
    combinationData.value = undefined
    open.value = true
}

/** 查询井列表 */
function getList() {
    if (combinationType.value == 'CPLog') {
        query.value.combinationSeries = 'CPLog'
        queryList(query.value).then((response) => {
            dataSource.value = response.content;
            total.value = response.totalElements;
        });
    } else if (combinationType.value == '5700') {
        query.value.combinationSeries = '5700'
        queryList(query.value).then((response) => {
            dataSource.value = response.content;
            total.value = response.totalElements;
        });
    } else {
        queryList(query.value).then((response) => {
            console.log(response);
            dataSource.value = response.content;
            total.value = response.totalElements;
        });
    }
}
getList();


/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    combinationType.value = ''
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', combinationSeries: undefined
    }
    getList();
}

// 返回
function getReturn() {
    open.value = false
    getList();
}
</script>
  